body {
  background-color: #fff;
}
.main,
.main1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main img,
.main1 img {
  height: 80px;
  width: 80px;
}
.main span,
.main1 span {
  margin-top: 20px;
}
.main-butt,
.main-butt2,
.main-butt-zhang,
.main-butt2-zhang {
  margin: 50px 20px 20px 20px ;
  width: 90%;
  height: 40px;
  border: 1px solid #999999;
  border-radius: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.main-butt span,
.main-butt2 span,
.main-butt-zhang span,
.main-butt2-zhang span {
  color: #999999;
  margin: 0 15px;
}
.main-butt input,
.main-butt2 input,
.main-butt-zhang input,
.main-butt2-zhang input {
  border: none;
  border-left: 1px solid #999999;
  height: 20px;
  padding-left: 15px;
  outline: none;
}
.main-butt ::-webkit-input-placeholder,
.main-butt2 ::-webkit-input-placeholder,
.main-butt-zhang ::-webkit-input-placeholder,
.main-butt2-zhang ::-webkit-input-placeholder {
  color: #cccccc;
}
.main-butt:hover {
  border: 1px solid #2561EF;
}
.main-butt2,
.main-butt-zhang,
.main-butt2-zhang {
  display: flex;
  justify-content: space-between;
  margin-top: 0px;
}
.main-butt2 input,
.main-butt-zhang input,
.main-butt2-zhang input {
  border: none;
}
.main-butt2 button,
.main-butt-zhang button,
.main-butt2-zhang button {
  border: none;
  background-color: #fff;
  color: #2561EF;
  margin-right: 10px;
}
.main-butt2 .popup,
.main-butt-zhang .popup,
.main-butt2-zhang .popup {
  background-color: #fff;
  position: absolute;
  border: 1px solid #999999;
  right: 0;
  top: 40px;
  display: none;
  border-radius: 2px;
}
.main-butt2 .popup ul li,
.main-butt-zhang .popup ul li,
.main-butt2-zhang .popup ul li {
  margin: 5px;
  padding: 2px;
  color: #333333;
  border: 1px solid #999999;
  background-color: #f2f2f2;
  border-radius: 2px;
}
.main-butt2 .main-no,
.main-dl .main-no {
  position: absolute;
  width: 150px;
  height: 120px;
  border: 1px solid;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: none;
}
.main-butt2 .main-no .ioc,
.main-dl .main-no .ioc {
  background-color: #fff;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  color: #000;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
}
.main-butt2 .main-no span,
.main-dl .main-no span {
  color: #fff;
  margin-top: 10px;
}
.main-zi-zhang button {
  color: #2561EF;
  background: none;
  border: none;
}
.main-zi button {
  color: #2561EF;
  background: none;
  border: none;
}
.main-butt2:hover {
  border: 1px solid #2561EF;
}
.main-butt-zhang:hover {
  border: 1px solid #2561EF;
}
.main-butt2-zhang:hover {
  border: 1px solid #2561EF;
}
.main-yong,
.main-yong-zhang {
  margin: 30px 0 20px 20px;
  display: flex;
  align-items: flex-end;
}
.main-yong input,
.main-yong-zhang input {
  height: 16px;
  width: 16px;
  margin-right: 10px;
  font-weight: normal;
}
.main-yong .f12,
.main-yong-zhang .f12 {
  color: #cccccc;
}
.main-yong .lan,
.main-yong-zhang .lan {
  color: #2561EF;
}
.main-yong-zhang .wang {
  flex-grow: 1;
  text-align: right;
  margin-right: 20px;
}
.main-dl {
  margin: 0 20px;
}
.main-dl .f16 {
  width: 100%;
  height: 40px;
  color: #fff;
  background-color: #2561EF;
  border-radius: 5px;
  border: none;
}
.main-dl .popup1 {
  background-color: #fff;
  position: absolute;
  border: 1px solid #999999;
  right: 35%;
  top: 435px;
  display: none;
  border-radius: 2px;
}
.main-dl .popup1 ul li {
  margin: 5px;
  padding: 2px;
  color: #333333;
  border: 1px solid #999999;
  background-color: #f2f2f2;
  border-radius: 2px;
}
.main-zi,
.main-zi-zhang {
  margin: 20px ;
  display: flex;
  justify-content: space-between;
  color: #2561EF;
}
.main-butt-zhang {
  margin-top: 50px;
}
.close {
  display: none;
}
